<template>
  <div class="articesC">
    <template v-for="(item) in newlist" >
      <div class="articesC-all" :key="item.id || null">
        <div>
          <!-- ------- -->
          <div class="top">
            <img src="../../assets/logo.png" alt="" class="top-img">
            <h3>{{ item.nickName }}</h3>
          </div>
          <div class="mid">
            <div class="title-div">
              <h3 class="title"> {{item.title}} </h3>
              <span class="time"> {{ item.createTime }} </span>
            </div>
          </div>
          <div class="contenter">
            {{ item.content }}
          </div>
          <!-- -------- -->
        </div>
        <div class="ioc">
          <div @click="dianzan( item.id )">
            <!-- <i class="iconfont icon-dianzan ioc-ioc"></i> -->
            <i :class="[ 'iconfont', 'icon-dianzan', item.ifpeaise? 'ioc-ioc2': 'ioc-ioc' ]"></i>
            <span> {{ item.likeCount }} </span>
          </div>
          <div>
            <!-- <i class="iconfont icon-jiahao ioc-ioc"></i> -->
            <i :class=" [ 'iconfont', 'icon-jiahao', item.ifattention? 'ioc-ioc2': '', 'ioc-ioc' ] "></i>
            <span> {{ item.fanCount }} </span>
          </div>
          <div>
            <!-- <i class="iconfont icon-shoucang ioc-ioc"></i>
            <i :class=" [ 'iconfont', 'icon-jiahao', item.ifattention? 'ioc-ioc2': '', 'ioc-ioc' ] "></i> -->
            <i :class=" [ 'iconfont', 'icon-shoucang', item.ifshoucang? 'ioc-ioc2': '', 'ioc-ioc' ] "></i>
            <span> {{ item.collectCount }} </span>
          </div>
          <div>
            <i class="iconfont icon-pinglun ioc-ioc"></i>
            <span> {{ item.commentCount }} </span>
          </div>
          <div>
            <i class="iconfont icon-yanjing ioc-ioc"></i>
            <span> {{ item.views }} </span>
          </div>
        </div>
      </div>
    </template>
    <div class="page" v-if="newlist.length !== 0">
      <el-pagination
        layout="prev, pager, next"
        :total="newlist.length"
        size="10"
        @current-change="currentchange"
        >
        
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {dianzanAPI} from '../../api/blogone'
export default {
/**
 * 数据
 * name
 * title
 * contenter
 * ifattention
 * ifpeaise
 * time
 */
props: {
  newlist: {
  },
  ifproprs: {
    type: String
  }
},
data() {
  return {
    maxsize: 9,
    minsize: 0
  }
},
methods: {
  currentchange(page) {
    console.log(page);
    
  },
  async dianzan(id) {
    if (JSON.parse(window.localStorage.getItem('user')).id) {
      const res = await dianzanAPI({
        userId: JSON.parse(window.localStorage.getItem('user')).id,
        blogId: id
      })
      console.log(res);
    } else {
      alert('请登录')
    }
  }
},
mounted() {
  
}
}
</script>

<style lang="scss" scoped>
.articesC{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.articesC-all{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 20px;
  user-select: none;
  cursor: pointer;
}
.top {
  .top-img {
    width: 50px;
    height: 50px;
    background-color: #fff;
    // border-radius: 50%;
  }
  display: flex;
  align-items: center;
}

.mid{
  margin-top: 10px;
  border-bottom: 1px dashed rgb(212, 211, 211);
  .title-div{
    display: flex;
    justify-content: space-between;
    h3{
      width: 500px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 18px;
    }
    .title:hover{
      color: orange;
    }
  }
}
.contenter{
  border-bottom: 1px dashed rgb(212, 211, 211);
  margin-top: 30px;
  height: 75px;
  line-height: 24px;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}
.ioc{
  display: flex;
  justify-content: space-around;
  .ioc-ioc{
    font-size: 20px;
  }
}
.ioc-ioc2 {
  font-size: 20px !important;
  color: skyblue !important;
}
</style>